<template>
  <div class="song_detail">
    <Header title="歌单详情" go-back="true"></Header>
    <back-top></back-top>
    <div class="song_box">
      <div class="song_head" :style="{backgroundImage: 'url('+playlist.coverImgUrl+')'}">
        <div class="song_img" :style="{backgroundImage: 'url('+playlist.coverImgUrl+')'}">
        </div>
        <div class="song_title">
          <p>{{playlist.name}}</p>
          <span v-for="(label,indexl) in playlist.tags" :key="indexl">{{label}}</span>
        </div>
      </div>
      <ul>
        <!--@click="goSongPlay(song.id, song.name, song.ar[0].name, song.al.picUrl)-->
        <li v-for="(song,indexs) in playlist.tracks" :key="indexs" @click="goSongPlay(song.id, song.name, song.ar[0].name, song.al.picUrl)">
          <div class="div1">
            {{indexs+1}}
          </div>
          <div class="div2">
            <p>{{song.name}}</p>
            <p>{{song.ar[0].name}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Header from '../../Header/Header'
import BackTop from '../../backtop/src/main'
import {getSongDetail} from '../../../api/node'
import {saveSongUrl, saveSongId, saveSingerName, saveSongName} from '../../../api/storage'

export default {
  name: 'songDetail',
  data () {
    return {
      playlist: {}
    }
  },
  created () {
    getSongDetail(this.$route.params.id).then(res => {
      // console.log(res)
      if (res.code === 200) {
        this.playlist = res.playlist
      }
    })
  },
  methods: {
    goSongPlay (id, sname, name, url) {
      saveSongUrl(url)
      saveSongName(sname)
      saveSingerName(name)
      saveSongId(id)
      this.$router.push('/songPlay2')
      // this.$router.push({name: 'songPlay', params: {id: id, sNmae: sname, name: name, imgUrl: url}})
      // this.$router.push('/songPlay/' + id + '/' + sname + '/' + name)
    }
  },
  components: {
    Header,
    BackTop
  }
}
</script>

<style lang="scss" scoped>
.song_detail{
  width: 100%;
  padding-top: 50px;
  .song_box{
    width: 100%;
    .song_head{
      width: 100%;
      height: 120px;
      background-position: center;
      padding: 10px;
      display: inline-flex;
      align-items: center;
      .song_img{
        width: 100px;
        height: 100px;
        background-size: 100% 100%;
        border: 2px solid #f2f2f2;
        box-shadow: 1px 2px 3px #888;
      }
      .song_title{
        margin-left: 10px;
        background: #000;
        opacity: 0.5;
        padding: 5px;
        p{
          font-size: 16px;
          color: #fff;
        }
        span{
          color: #fff;
          font-size: 10px;
          margin-left: 5px;
        }
      }
    }
    ul{
      width: 100%;
      li{
        width: 100%;
        padding: 10px;
        border-bottom: 1px solid #f2f2f2;
        display: inline-flex;
        align-items: center;
        .div1{
          padding: 0 10px;
        }
        .div2{
          padding-left: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          p:first-child{
            font-size: 14px;
            font-weight: bolder;
          }
        }
      }
    }
  }
}
</style>
